<template>
  <!-- 游戏资讯 -->
  <div>
    <div class="app-container">
      <el-tabs v-model="activeName" class="tabs_div" @tab-click="handleClick">
        <el-tab-pane label="新游资讯" name="first">
          <div class="header">
            <div>
              <el-radio-group v-model="channel">
                <el-radio-button size="medium" label="港澳台资讯" />
                <el-radio-button size="medium" label="日本游戏资讯" />
                <el-radio-button size="medium" label="韩国游戏资讯" />
                <el-radio-button size="medium" label="欧美游戏资讯" />
              </el-radio-group>
            </div>
            <div class="New">
              <el-button type="text" @click="dialogTableVisible = true">手动更新资讯</el-button>
              <el-dialog width="80%" title="渠道" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                  <el-table-column property="date" label="日期" width="150" />
                  <el-table-column property="name" label="姓名" width="200" />
                  <el-table-column property="address" label="地址" />
                </el-table>
              </el-dialog>
            </div>
          </div>
          <el-divider class="text-ider" content-position="right">三十年河东，三十年河西，莫欺少年穷</el-divider>
          <el-card class="box-card">
            <!-- <div v-for="o in 99" :key="o" class="text item">
              {{ '列表内容 ' + o }}
            </div> -->
            <div class="article-container">
              <div class="article-image">
                <img src="https://p2.bahamut.com.tw/S/2KU/95/28926ab38a5db235e95c9c47691nwv35.WEBP?w=180" alt="Article Image">
              </div>
              <div class="article-content">
                <div class="article-title">Article Title</div>
                <span class="article-date">January 1, 2023</span>
                <div class="article-excerpt">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="read-more">
                  <a href="path/to/full/article">Read More</a>
                </div>
              </div>
            </div>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="日常监控" name="second">
          <el-card class="box-card">
            <div class="clearfix">
              <div class="block">
                <div class="game_name">
                  <el-avatar :size="50" :src="circleUrl" />
                  <span
                    style="
                padding: 0 0 0 10px;
            "
                  >碧蓝档案</span>
                </div>

                <el-button style="float: right; padding: 3px 0" type="text">查看原文</el-button>
              </div>

            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '列表内容 ' + o }}
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      activeName: 'first',
      filterText: '',
      circleUrl: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
      channel: '港澳台资讯',
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false
    }
  },
  watch: {
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.article-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.article-image {
  flex: 1;
  margin-right: 20px;
}

.article-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.article-content {
  flex: 2;
}

.article-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.article-date {
  color: #555;
  margin-bottom: 10px;
}

.article-excerpt {
  color: #333;
}

.read-more {
  text-align: right;
}

.read-more a {
  text-decoration: none;
  color: #007BFF;
  font-weight: bold;
}

.header{
  display: flex;
    justify-content: space-between;
}
.game_name{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.block{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-card__header {
    padding: 10px 10px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.text-ider{
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #756b6b;
  font-family: cursive;
}
.is-top {
  position: relative;
  padding: 0 0 20px;
}
.clearfix{
  margin: -7px 0 10px;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #c0c4cc;
}
</style>
